<script setup>
import TabBar from "@/components/TabBar.vue";
import Nav from "@/components/Nav.vue";
import { ref, watch, computed, onBeforeMount } from "vue";
import requestUtil from "@/utils/request.js";

let foodList = ref([]);
let originalFoodList = ref([]); // 存储未过滤的原始数据
let active = ref(0);
let value = ref(""); // 搜索框的输入值

// 监听排序方式的切换
watch(active, (newVal) => {
  if (newVal === 0) {
    foodList.value = foodList.value.sort((a, b) => b.rate - a.rate);
  } else if (newVal === 1) {
    foodList.value = foodList.value.sort((a, b) => a.distance - b.distance);
  } else if (newVal === 2) {
    foodList.value = foodList.value.sort((a, b) => b.sale - a.sale);
  }
});

// 加载数据
let load = async () => {
  let res = await requestUtil.get("/app/show/");
  foodList.value = res.data.data;
  originalFoodList.value = [...res.data.data]; // 保存原始数据
};
// 搜索功能
watch(value, (searchTerm) => {
  if (searchTerm) {
    foodList.value = originalFoodList.value.filter(
      (item) =>
        (item.name && item.name.includes(searchTerm)) || // 检查 name 是否存在
        (item.description && item.description.includes(searchTerm)) // 检查 description 是否存在
    );
  } else {
    foodList.value = [...originalFoodList.value]; // 如果搜索框为空，恢复原始数据
  }
});


onBeforeMount(async () => {
  await load();
});

let list1 = [
  { src: "/img/首页/美食.png", text: "美食" },
  { src: "/img/首页/火锅.png", text: "火锅" },
  { src: "/img/首页/生鲜.png", text: "生鲜" },
  { src: "/img/首页/果蔬.png", text: "果蔬" },
  { src: "/img/首页/跑腿.png", text: "烧烤" },
  { src: "/img/首页/下午茶.png", text: "下午茶" },
  { src: "/img/首页/披萨.png", text: "披萨" },
  { src: "/img/首页/面包.png", text: "面包" },
  { src: "/img/首页/炸鸡.png", text: "炸鸡" },
  { src: "/img/首页/鲜花.png", text: "鲜花" },
];
</script>

<template>
  <div class="home">
    <!-- 搜索框 -->
    <div class="search">
      <van-search
        v-model="value"
        placeholder="请输入商家或商品名称"
        input-align="left"
        background="#F7F7F7"
        clearable
      />
    </div>

    <div class="img">
      <img src="/img/首页/页面图.png" />
    </div>

    <!-- 导航栏 -->
    <div class="nav">
      <Nav :list1="list1"></Nav>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <h2>附近商家</h2>
      <div class="title">
        <van-tabs
          v-model:active="active"
          color="red"
          title-active-color="#FFB200"
          title-inactive-color="#666666"
        >
          <van-tab title="综合排序">
            <Menu1 :foodList="foodList"></Menu1>
          </van-tab>
          <van-tab title="附近最近">
            <Menu1 :foodList="foodList"></Menu1>
          </van-tab>
          <van-tab title="销量最高">
            <Menu1 :foodList="foodList"></Menu1>
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <!-- 底部导航 -->
    <TabBar></TabBar>
  </div>
</template>

<style scoped>
/* 页面整体 */
.home {
  padding-bottom: 100px;
  background: linear-gradient(to bottom, #fff7e8, #fbe3c9);
}

/* 搜索框 */
.search {
  height: 140px;
  background: linear-gradient(to right, #f4ca7d, #ffc641);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.search .van-search {
  padding: 0;
  width: 90%;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 顶部图片 */
.img img {
  width: 100%;
  border-radius: 12px;
  margin: 15px 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 导航栏 */
.nav {
  display: grid;
  grid-template-rows: repeat(2, 120px);
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 20px;
}

.nav-icon img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(to right, #c6aa97, #ff6f00);
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 内容区域 */
.content {
  margin: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.content h2 {
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
}

/* Tab栏 */
.tabs .van-tabs__line {
  height: 3px;
  background: linear-gradient(to right, #ff6f00, #ff9a5a);
}
</style>